<script setup lang="ts">
import {ref, watch} from "vue";
import {CircleCloseFilled, Upload} from "@element-plus/icons-vue";
import FileUpload from "@/components/file/fileUpload.vue";
import {getSumFile} from "@/api/file/fileList.ts";
import {getFileFormat} from "@/utils/file.ts";
import FileDownload from "@/components/file/fileDownload.vue";

const props = defineProps ({
  downloadDialogVisible:{
    type:Boolean,
    required:true
  },
  folderId:{
    type:String,
    required:true
  }
})

let fileList = ref([])
const fileDownloadData = ref({
  isShow: false,
  fileName:"",
  fileDate:Object
})

const getSumFileList = async () => {
  const response = await getSumFile(props.folderId)
  const data = response.data.data
  data.forEach((item:any) => {
    item.suffix = getFileFormat(item.name)
  })
  fileList.value = data
  console.log(fileList.value)
}

const dialogVisible = ref(props?.downloadDialogVisible)

watch(()=>props.downloadDialogVisible,(newValue)=>{
  dialogVisible.value = newValue
  getSumFileList()
})
const emits = defineEmits(['close']);
const handleClose = ()=>{
  emits('close');
}

const handleCloseDownload = ()=>{
  fileDownloadData.value.isShow = false
}
const showDialog = (item:any) => {
  fileDownloadData.value.isShow = true
  fileDownloadData.value.fileName = item.name
  fileDownloadData.value.fileDate = item
}


</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      fullscreen
      :show-close="false"
      :close-on-press-escape="false"
  >
    <template #header>
      <div class="my-header">
        <el-button type="danger" class="my-button" @click="handleClose">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </div>
    </template>
    <div class="file-context">
        <div v-for="(item, index) in fileList" :key="index" class="list-box"  @click="showDialog(item)">
          <el-icon :class="item.suffix" :size="80"/>
          <div class="width:600px">
            <p class="box-name">{{item.name}}</p>
            <p class="box-time">{{item.createdAt}}</p>
          </div>
        </div>
    </div>
    <div class="add-btn">
      <file-upload :pid="props.folderId" @upload-success="getSumFileList">
        <el-button type="primary">
          <el-icon class="el-icon--right"><Upload /></el-icon>
          文件上传
        </el-button>
      </file-upload>
    </div>
  </el-dialog>
  <FileDownload @close="handleCloseDownload" :file-date="fileDownloadData?.fileDate" :file-title="fileDownloadData?.fileName" :download-dialog-visible="fileDownloadData?.isShow"/>
</template>

<style scoped lang="scss">
.add-btn{
  position: absolute;
  bottom: 20px;
  right: 30px;
}

::v-deep(.el-upload-dragger){
  border: unset;
}

.my-header{
  flex-direction: row;
  font-size: 16px;
  font-weight: bold;

  .my-button{
    position: absolute;
    top: 6px;
    left: 0;
    margin: 15px;
  }
}
.file-context{
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
  overflow-y:auto ;

  .download-button{
    height: 36px;
    min-width: 100px;
    color: #ffffff;
    background: linear-gradient(to right, #79bbff, #ff7a7a);
  }

  .list-box{
    width: 155px;
    min-height: 180px;
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;

    .box-name{
      font-size: 14px;
      font-weight: 600;
      margin: unset;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .box-time{
      font-size: 12px;
      color: #CDD0D6;
    }
  }

  .list-box:hover{
    background-color: #D9ECFF;
  }

  .download-button:hover{
    background: linear-gradient(to right, #79bbff, #ef1313);
  }
}
</style>
